<script setup>

const isUse = $ref(true)
const isShow = $ref(false)

const classObject = $ref({
  myDiv: true,
  myDiv2: false
})

const myDiv = $ref('myDiv')
const myDiv2 = $ref('myDiv2')


</script>

<template>
  <h4>样式绑定:class和style</h4>
  <h5>控制样式class是否生效</h5>
  <button @click="isUse=!isUse">改变样式</button>
  <div :class="{myDiv:isUse,myDiv2:isShow}">
    内部字体。。。
  </div>
  <div :class="classObject">
    内部字体。。。
  </div>
  <div :class="[myDiv,myDiv2]">
    数组形式:将class名字放到数组中
  </div>
</template>

<style>
.myDiv{
  width: 400px;
  height: 200px;
  background-color: red;
}
.myDiv2{
  font-size: large;
}
</style>
